<template lang="pug">
  .zgplugin-date.zgplugin-empty(v-if="(!exist || !show)&&editor")
    svg-icon.empty-icon(icon-class="组件日期")
  .zgplugin-date(v-show="show" v-else-if="exist")
    normal-date-render(v-if="!config.isFilter" :config="config" :readonlyMain="readonlyMain" :editor="editor" ref="normalDate" :scope="scope")
    filter-date-render(v-if="config.isFilter" :config="config" :editor="editor" ref="filterDate")
</template>

<script>
import inputCommon from '../../../../mixin/inputCommon'
import normalDateRender from './normalDateRender'
import filterDateRender from './filterDateRender'

export default {
  name: 'dateRender',
  components: { normalDateRender, filterDateRender },
  mixins: [inputCommon],
  props: ['config', 'editor', 'scope','readonlyMain'],
  inject: ['rootForm'],
  data() {
    return {
      default: this.config.dateType.indexOf('range') > -1 ? [] : undefined
    }
  },
  methods: {
    commit() {
      this.$refs.filterDate.commit()
    },
    validate() {
      return this.$refs.normalDate.validate()
    }
  },
  created() {
  }
}
</script>
<style lang="scss">
  .zgplugin-date {
    margin-top: 16px;
    .el-form-item{
      margin-bottom: 0 !important;
    }
    .show-date-value {
      position: relative;
      line-height: normal;
      .van-cell {
        padding: 0 0 0 2px !important;
        border-bottom: 1px solid #ebedf0;
      }
      .show-date-value-range {
        .van-cell {
          width: calc(50% - 14px);
          display: inline-block;
        }
        span {
          display: inline-block;
          line-height: normal;
          position: relative;
          top: -6px;
          margin: 0 4px;
        }
      }
      .date-icon {
        // color:#aaa;
        color: #999;
        position: absolute;
        right: 2px;
        top: 50%;
        // width: 18px;
        // height: 18px;
        font-size: 18px;
        margin-top: -11px;
      }
    }
  }
</style>
